<!DOCTYPE html>
<html lang="en">
<head>
    {% load static %}
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 智能换装</title>
    <!-- 引入外部 CSS 文件 -->
    <link rel="stylesheet" href="{% static 'css/ai.css' %}">
</head>
<body>
    {% csrf_token %}
    <div id="notification" style="
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #007bff;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    display: none;
    z-index: 1000;
    font-size: 16px;
    "> </div>

    <div class="container">
        <!-- 左侧面板 -->
        <div class="left-panel">
            <h3>选择姿态</h3>
            <div class="image-grid" id="pose-grid">

                {% for pose in poses %}

                    <div class="image-container" data-type="pose" data-id="{{ pose.id }}">
                        <img src="{% static pose.image_path %}" alt="Pose">
                        <div class="checkmark"></div>
                    </div>

                {% endfor %}
            </div>

            <h3>选择面容</h3>
            <div class="image-grid" id="face-grid">
                {% for face in faces %}
                        <div class="image-container" data-type="face" data-id="{{ face.id }}">
                            <img src="{% static face.image_path %}" alt="Face">
                            <div class="checkmark"></div>
                        </div>
                {% endfor %}
            </div>

            <h3>选择服装</h3>
            <div class="image-grid" id="clothing-grid">
                {% for clothing in clothings %}
                        <div class="image-container" data-type="clothing" data-id="{{ clothing.id }}">
                            <img src="{% static clothing.image_path %}" alt="Clothing">
                            <div class="checkmark"></div>
                        </div>
                {% endfor %}
            </div>
        </div>

        <!-- 中间面板 -->
        <div class="center-panel">
                <button id="generateButton">生成</button>  
        </div>

        <!-- 右侧面板 -->
        <div class="right-panel">
            <h3>生成结果</h3>
            <img src="{% static  'images/simple.jpg' %}" alt="Generated Image" id="generatedImage">
        </div>



        
    </div>  
    <!-- 添加脚本 -->
    <script>
        // 用于记录选中的图片
        const selectedImages = {
            pose: null,
            face: null,
            clothing: null
        };

        // 处理图片点击选择
        document.querySelectorAll('.image-container').forEach(container => {
            container.addEventListener('click', () => {
                const type = container.dataset.type; // pose, face, or clothing
                const id = container.dataset.id;

                // 清除当前类型的选中状态
                document.querySelectorAll(`.image-container[data-type="${type}"]`).forEach(item => {
                    item.classList.remove('selected');
                });

                // 标记当前选中的图片
                container.classList.add('selected');
                selectedImages[type] = id; // 更新选中记录

                console.log(selectedImages); // 输出选中的图片信息（用于调试）
            });
        });

        function hideNotification() {
            const notification = document.getElementById('notification');
            notification.style.display = 'none';
        }
        function showNotification(message, isSuccess = true) {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.style.backgroundColor = isSuccess ? '#007bff' : '#dc3545'; // 蓝色：正常提示，红色：错误提示
            notification.style.display = 'block';
        }
        document.getElementById('generateButton').addEventListener('click', function () {
            // 获取选中的图片 ID
            console.log("生成按钮被点击");
            const faceId = document.querySelector('.image-container[data-type="face"].selected')?.dataset.id;
            const poseId = document.querySelector('.image-container[data-type="pose"].selected')?.dataset.id;
            const clothingId = document.querySelector('.image-container[data-type="clothing"].selected')?.dataset.id;

            // 检查是否选择了所有图片
            if (!faceId || !poseId || !clothingId) {
                alert("请先选择面容、姿态和服装！");
                return;
            }
            console.log("准备发送请求：", { faceId, poseId, clothingId }); // 打印发送的参数
            // 发送 POST 请求到后端
            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
            fetch("{% url 'ai_view' %}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'X-Requested-With': 'XMLHttpRequest',
                    'X-CSRFToken': csrfToken
                },
                body: new URLSearchParams({
                    face_id: faceId,
                    pose_id: poseId,
                    clothing_id: clothingId
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    console.log("后端返回数据：", data);
                    // 显示生成的图片
                    const generatedImage = document.getElementById('generatedImage');
                    generatedImage.src = "{% static '' %}" + data.output_path;
                } else {
                    alert(data.error || "生成失败，请稍后再试！");
                }
            })
            .catch(error => console.error('Error:', error));
        });


</script>
    
</body>
</html>
